import {Component} from 'react';
import {connect} from 'dva';
import {Link} from 'dva/router';
import {Avatar} from 'antd';
import {List, Badge} from 'antd-mobile';
import Icon from '../../../component/Icon';
import styles from './css/Me.css';
/* WaterWave */
import WaterWave from 'water-wave';
import 'water-wave/style.css';

class Me extends Component {
	
	render() {
		let {state, dispatch} = this.props;
		let {refreshing} = state;
		
		return (
			<div className={styles.container}>
				<div className={styles.head}>
					<div className={styles.headTop}>
						<div className={styles.headTop1}>
							<Avatar src={require('../asset/img/avatar.jpg')} size='large' />
						</div>
						<div className={styles.headTop2}>
							{/*
							<Icon type={require('../asset/svg/vip_logo_false.svg')} />
							<Icon type={require('../asset/svg/coin.svg')} />
							<Icon type={require('../asset/svg/coin.svg')} />
							*/}
							<div className={styles.nickname}>
								冯先森
							</div>
							<div className={styles.flags}>
								<span className={styles.vipFlagFalse}>还不是会员哦</span>
								{/*<span className={styles.vipFlagTrue}>尊享会员</span>*/}
								<Icon className={styles.boyFlag} type={require('../asset/svg/boy.svg')} />
								{/*<Icon className={styles.girlFlag} type={require('../asset/svg/girl.svg')} />*/}
							</div>
						</div>
					</div>
					<div className={styles.headBottom}>
						<div className={styles.headBottomItem}>读本&nbsp;16</div>
						<div className={styles.headBottomSplit}>|</div>
						<div className={styles.headBottomItem}>金币&nbsp;16</div>
					</div>
				</div>
				<div className={styles.body}>
					<div className={styles.bodyTop}>
						<div 
							className={styles.bodyTopItem}
							onClick={() => {
								dispatch({
									type: 'me/notice'
								});
							}}
						>
							<Icon className={styles.notice} type={require('../asset/svg/notice.svg')} />
							<span className={styles.prompt}>通知</span>
						</div>
						<div 
							className={styles.bodyTopItem}
							onClick={() => {
								dispatch({
									type: 'me/shoppingCart'
								});
							}}
						>
							<Icon className={styles.shoppingCart} type={require('../asset/svg/shopping_cart.svg')} />
							<span className={styles.prompt}>书篮</span>
						</div>
						<div 
							className={styles.bodyTopItem}
							onClick={() => {
								dispatch({
									type: 'me/topUp'
								});
							}}	
						>
							<Icon className={styles.vip} type={require('../asset/svg/vip.svg')} />
							<span className={styles.prompt}>充值</span>
						</div>
						<div 
							className={styles.bodyTopItem}
							onClick={() => {
								dispatch({
									type: 'me/setting'
								});
							}}
						>
							<Icon className={styles.setting} type={require('../asset/svg/setting.svg')} />
							<span className={styles.prompt}>设置</span>
						</div>
						<WaterWave color="#E6E6E6" duration={500} radius={40} />
					</div>
					<List>
						<List.Item 
							thumb={<Icon className={styles.bookcase} 
							type={require('../asset/svg/bookcase.svg')} />} 
							onClick={() => {
								dispatch({
									type: 'me/bookcase'
								});
							}}
						>
							我的书架
						</List.Item>
						<List.Item 
							thumb={<Icon className={styles.findPassword} 
							type={require('../asset/svg/find_password.svg')} />} 
							onClick={() => {
								dispatch({
									type: 'me/findPassword'
								});
							}}
						>
							找回密码
						</List.Item>
						<List.Item 
							thumb={<Icon className={styles.update} 
							type={require('../asset/svg/update.svg')} />} 
							onClick={() => {
								dispatch({
									type: 'me/update'
								});
							}}
						>
							快速更新
						</List.Item>
						<List.Item 
							thumb={<Icon className={styles.exit} 
							type={require('../asset/svg/exit.svg')} />} 
							onClick={() => {
								dispatch({
									type: 'me/exit'
								});
							}}
						>
							退出登录
						</List.Item>
					</List>
				</div>
			</div>
		);
	}
	
}

export default connect((state) => ({
	state: {
		...state.me,
		loading: state.loading.models.me
	}
}))(Me);
